import React from 'react';
import { Icon } from 'antd';
import { primaryColor } from '@/defaultSettings';
import styles from './index.less';

const Button = ({ type, loading, inline, disabled, children, style, onClick, ...rest }) => {
    const BtnStyle = {
        primary: {
            color: '#fff',
            background: primaryColor,
            border: `1px solid ${primaryColor}`,
            opacity: disabled ? 0.4 : 1
        },
        default: {
            color: '#49536C',
            background: '#fff',
            border: '1px solid #E1E5EC'
        }
    };

    const handleClick = () => {
        if (loading || disabled) {
            return;
        }
        if (onClick) onClick();
    };

    return (
        <div
            className={styles.button}
            style={{
                display: inline ? 'inline-block' : 'block',
                width: inline ? 'auto' : '100%',
                ...BtnStyle[type || 'default'],
                ...style
            }}
            onClick={handleClick}
            {...rest}
        >
            {loading && <Icon type="loading" style={{ padding: '0 8px' }} />}
            {children}
        </div>
    );
};

export default Button;
